<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通信</title>
    <style>
        .main{
            width: 50%;
            height: 600px;
            border: 1px solid #2a2a26;
            margin: 30px auto 0 auto;
            background: white;
        }
        .main-content{
            width: 50%;
            height: 98px;
            margin: 30px auto 0 auto;
            background: white;
        }
        #content{
            width: 100%;
            height: 98px;
            background: white;
        }
        .main > div{
            display: flex;
            align-items: center;
            padding: 5px 5px 0 5px;
            margin-bottom: 10px;
            /*border: 1px solid #5f51c6;*/
        }
        .main > div > div{
            padding: 0 10px 0 10px;
            background-color: #abeec2;
            min-height: 35px;
            height: 200%;
            margin: 0 20px 0 20px;
            border-radius:2%
        }
        .main-right{
            text-align: right;
        }
        .main > div > a > img{
            width: 50px;
            height: 50px;
            border-radius:50%
        }
        .main > div > a > div{
            /*width: ;*/
            background-color: #00B83F;
        }
        .main > .main-right{
            display: flex;
            justify-content: flex-end;
        }
        .main > .main-right > div{
            display: flex;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="main-left">
            <a href=""><img src="/static/upload/20200929/811601351993850530900.jpg" alt=""></a>
            <div>在吗??</div>
        </div>

        <div class="main-right">
            <div>不在？？</div>
            <a href=""><img src="/static/upload/20200929/811601351993850530900.jpg" alt=""></a>
        </div>

        <div class="main-right">
            <div>滚吧！！</div>
            <a href=""><img src="/static/upload/20200929/811601351993850530900.jpg" alt=""></a>
        </div>

        <div class="main-left">
            <a href=""><img src="/static/upload/20200929/811601351993850530900.jpg" alt=""></a>
            <div>的健康回访健康的施工方库函数对方空间很快就和圣达菲结婚的开放和健康和地方</div>
        </div>

        <div class="main-right">
            <div>
                我还是喜欢你，像风走了八万里。不问归期。就像那个小狗天天上学大步走
                我还是喜欢你，像风走了八万里。不问归期。就像那个小狗天天上学大步走
                我还是喜欢你，像风走了八万里。不问归期。就像那个小狗天天上学大步走
                我还是喜欢你，像风走了八万里。不问归期。就像那个小狗天天上学大步走
            </div>
            <a href=""><img src="/static/upload/20200929/811601351993850530900.jpg" alt=""></a>
        </div>

    </div>
    <div class="main-content">
        <textarea name="content" id="content"></textarea>
        <button id="send">发送</button>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    var socket;

    $(document).ready(function () {

        // Create a socket
        socket = new WebSocket('ws://' + window.location.host + '/{{config "String" "adminPath" ""}}/network/join?username=' + "吴梦良");
        // console.log(socket)
        // Message received on the socket
        socket.onmessage = function (e) {
            var data = JSON.parse(e.data);
            console.log(data);
        };
    });
</script>
</html>